<template>
  <div class="tab">
    <!--<router-link tag="div" class="tab-item" to="/tuanGouHome">
      <span class="tab-link">首页</span>
    </router-link>-->

    <router-link tag="div" class="tab-item" to="/tuangou">
      <div><i class="fa fa-users tab-link" aria-hidden="true"></i></div>
      <span class="tab-link tab-font">团购</span>
    </router-link>

    <router-link tag="div" class="tab-item" to="/kanjia">
      <div><i class="fa fa-gavel tab-link" aria-hidden="true"></i></div>
      <span class="tab-link tab-font">砍价</span>
    </router-link>

    <router-link tag="div" class="tab-item" to="/integral">
      <div><i class="fa fa-star-o tab-link" aria-hidden="true"></i></div>
      <span class="tab-link tab-font">积分</span>
    </router-link>

    <!--<router-link tag="div" class="tab-item" to="/cart">
      <span class="tab-link">购物车</span>
    </router-link>-->
    <router-link tag="div" class="tab-item" to="/mine">
      <div><i class="fa fa-user-o tab-link" aria-hidden="true"></i></div>
      <span class="tab-link tab-font">我的</span>
    </router-link>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {

      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/variable.styl"
  .tab
    position: fixed
    left: 0
    right: 0
    bottom: 0
    display: flex
    height: 46px
    font-size: $font-size-medium
    background: $color-background-panel
    border-top 1px solid $gray-6
    box-sizing border-box
    display flex
    align-items center
    .fa
      font-size 20px
    .tab-item
      flex: 1
      text-align: center
      .tab-font
        font-size 12px

      &.router-link-active
        .tab-link
          color: red
</style>
